<template>
    <div>
        <common-header></common-header>
        <common-title></common-title>
        <candidate-cover v-show="show0" @cancle="handleCoverClick" @afterSet="handleAfterSet"></candidate-cover>
        <candidate-list @insert="handleInsert" @file="handleFile" @alter="handleAlter"
        :listData="dataList" :listTitle="titleList" :listTitle2="titleList2" :flen="flen"
        >
        </candidate-list>
        <common-pagination @curPageChanged="handlecurPageChanged"
          :totalPages="totalPages" :totalData="totalData"></common-pagination>
        <common-fade>
          <candidate-insert v-if="show1" :list="titleList" @cancle="handleInsert" @insertPerson="handleInsertPerson">
          </candidate-insert>
        </common-fade>
        <common-fade>
          <candidate-file v-if="show2" @cancle="handleFile" @afterFile="handleAfterFile"></candidate-file>
        </common-fade>
         <common-fade>
          <candidate-alter v-if="show3" @cancle="handleAlter" :human="obj" :list="titleList" @alterPerson="handleAlterPerson"></candidate-alter>
        </common-fade>
    </div>
</template>

<script>
import { mapState } from 'Vuex'
// import Vue from 'Vue'
import axios from 'axios'
import CommonFade from 'common/fade'
import CommonHeader from 'common/components/header'
import CommonTitle from 'common/components/title'
import CandidateFile from './components/File'
import CandidateInsert from './components/Insert'
import CommonPagination from 'common/Pagination'
import CandidateCover from './components/Cover'
import CandidateAlter from './components/Alter'
import CandidateList from './components/List'
export default {
  name: 'notice',
  components: {
    CommonHeader,
    CommonTitle,
    CommonFade,
    CommonPagination,
    CandidateCover,
    CandidateFile,
    CandidateInsert,
    CandidateAlter,
    CandidateList
  },
  data () {
    return {
      obj: {},
      show0: true,
      show1: false,
      show2: false,
      show3: false,
      personIndex: '',
      curPage: '1',
      totalPages: '',
      totalData: ' ',
      // person: {'11':'','22':'','33':''},{'姓名': '张三', '性别': '男', '职称': '高级教授'}
      dataList: [],
      titleList: [],
      titleList2: [],
      flen: 0
    }
  },
  computed: {
    ...mapState(['userPassword']),
    ...mapState(['userId'])
    // dataList () {
    //   const dataList = []
    //   for (let i = 1; i < list.length; i++) {
    //     if (!dataList[i]) {
    //       dataList[i] = []
    //     }
    //   }
    //   console.log(dataList)
    //   return dataList
    // }
  },
  methods: {
    handleCoverClick () {
      this.show0 = false
      this.getCandidateInfo()
    },
    handleAfterSet (list, list2) {
      this.show0 = false
      this.titleList = list
      this.titleList2 = list2
      // console.log(this.titleList)
      // this.handleCreatePerson()
    },
    handleInsert () {
      this.show1 = !this.show1
    },
    handleInsertPerson (a) {
      this.dataList.unshift(a)
      this.show1 = false
      this.totalData = Number(this.totalData)
      this.totalData += 1
      this.totalData = this.totalData.toString()
    },
    handleHandleDelete () {
      this.totalData = Number(this.totalData)
      this.totalData -= 1
      this.totalData = this.totalData.toString()
    },
    handleFile () {
      this.show2 = !this.show2
    },
    handleAfterFile () {
      this.getCandidateInfo()
      this.show2 = false
    },
    handleAlter (e, index) {
      this.show3 = !this.show3
      this.obj = e
      this.personIndex = index
    },
    handleAlterPerson (e) {
      // this.dataList.splice(this.personIndex, 1, e)
      this.getCandidateInfo()
      this.show3 = false
    },
    handlecurPageChanged (curPage) {
      this.curPage = curPage
      this.getCandidateInfo()
    },
    getCandidateInfo () {
      // console.log(this.userId)
      // console.log(this.curPage.toString())
      axios.post('http://192.168.43.188:8081/getCandidates', {
        'id': this.userId,
        'pn': this.curPage.toString()
        // 'jd': '1'
      }).then(({status, data}) => {
        console.log(data)
        if (data && data.msg === '111') {
          this.totalPages = data.tp.toString()
          this.totalData = data.td.toString()
          this.dataList = data.info
          this.flen = data.flen
        } else if (data.msg) {
          swal(data.msg, '', 'error')
        }
      }).catch((error) => {
        swal('info' + error, '', 'error')
      })
    },
    back () {
      if (!this.userPassword) {
        swal("请重新登录输入密码", '', 'warning')
        this.$router.push('/')
      }
    }
  },
  watch: {
    list () {
      const pages = []
      if (!pages[this.curPage]) {
        pages[this.curPage] = []
      }
      pages.push(this.list)
    }
  },
  // handleCreatePerson () {
  //   this.list.forEach((item) => {
  //     Vue.set(this.person, item, '')
  //   })
  //   console.log(this.person)
  //   console.log(this.dataList)
  // }
  // activated () { this.show0 = true },
  mounted () {
    this.back()
    this.show0 = true
  },
  updated () {
    // this.getCandidateInfo()
    // console.log(this.dataList[0])
    const listtitle = []
    if (!this.titleList.length && this.dataList[0]) {
      for (let i in this.dataList[0]) {
        listtitle.push(i)
      }
      // console.log(listtitle)
      this.titleList = listtitle
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
